<template>
  <div>
    <div class="height100P wrapper flex justify-sb ">
      <div class="left">
<!--      情感挽回  文字内容-->
        <div class="qgwh_content" v-if="pageName === 'qgwh'">

          <div>
            <img src="../../assets/imgs/qgwh_page_bg.png" class="qgwh_page_bg">
            <div class="buyNow">
              <div><span class="one-span ">服务内容包含：</span></div>
              <div>自选导师<span class="two-span">1对1</span>服务</div>
              <div><span class="two-span">600分钟</span>语音1对1挽回服务时间</div>
              <div>APP内<span class="two-span">500条</span>文字信息收发回合</div>
              <div><span class="two-span">2次</span>紧急干预（导师直接联系对方）</div>
              <div>服务有效期：60天</div>

              <div class="flex align-center margin-top-20 justify-sb">
                <span class="price-span">¥6899</span>
                <span class="dis-block ljgm-but">立即购买</span>
              </div>
            </div>
          </div>

        </div>

        <!--      关系升温  文字内容-->
        <div class="gxsw_content" v-else-if="pageName === 'gxsw'">
          <div>
            <img src="../../assets/imgs/gxsw_page_bg.png" class="qgwh_page_bg">
            <div class="buyNow">
              <div><span class="one-span ">服务内容包含：</span></div>
              <div>自选导师<span class="two-span">1对1</span>服务</div>
              <div><span class="two-span">600分钟</span>语音1对1挽回服务时间</div>
              <div>APP内<span class="two-span">500条</span>文字信息收发回合</div>
              <div><span class="two-span">2次</span>紧急干预（导师直接联系对方）</div>
              <div>服务有效期：60天</div>

              <div class="flex align-center margin-top-20 justify-sb">
                <span class="price-span">¥2899</span>
                <span class="dis-block ljgm-but">立即购买</span>
              </div>
            </div>
          </div>
        </div>


        <!--      分离小三  文字内容-->
        <div class="flxs_content" v-else-if="pageName === 'flxs'">
          <div>
            <img src="../../assets/imgs/flxs_page_bg.png" class="qgwh_page_bg">
            <div class="buyNow">
              <div><span class="one-span ">服务内容包含：</span></div>
              <div>自选导师<span class="two-span">1对1</span>服务</div>
              <div><span class="two-span">600分钟</span>语音1对1挽回服务时间</div>
              <div>APP内<span class="two-span">500条</span>文字信息收发回合</div>
              <div><span class="two-span">4次</span>紧急干预（导师直接联系对方）</div>
              <div>服务有效期：60天</div>

              <div class="flex align-center margin-top-20 justify-sb">
                <span class="price-span">¥9899</span>
                <span class="dis-block ljgm-but">立即购买</span>
              </div>
            </div>
          </div>
        </div>

        <!--          支付宝微信按钮-->
        <div class="border-box padding-20 bg-white but-wrap">
          <el-button type="primary" @click="$router.push('zfbfk')">支付宝</el-button>
          <el-button type="success">微信</el-button>
        </div>

<!--        信息填写-->
        <div class="infos">
          <div class="margin-bottom-20">
            <span class="qlx-span">请留下您的联系方式</span>
            <span class="bitian">（必填）</span>:
          </div>
          <div class="item">
            <label>姓名：</label>
            <input placeholder="请输入您的姓名"/>
          </div>
          <div class="item margin-top-10">
            <label>电话：</label>
            <input placeholder="请输入您的电话"/>
          </div>
          <div class="item margin-top-10">
            <label>微信号：</label>
            <input placeholder="请输入您的微信号"/>
          </div>
          <div class="item margin-top-10">
            <label>电子邮箱：</label>
            <input placeholder="请输入您的电子邮箱"/>
          </div>
        </div>

      </div>
      <div class="right flex align-center justify-center">
        <div class="weixin-wrap">
          <img src="../../assets/imgs/erweima.png" class="ver-middle">
          <img src="../../assets/imgs/qq.png" class="ver-middle">
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "FwgmQgwh",
  data(){
    return{
      pageName: ''
    }
  },
  created() {
    this.pageName = this.$store.state.pageName
  }
};
</script>

<style scoped lang="scss">
  .wrapper{
    margin-top: 60px;
    margin-bottom: 30px;

    .qgwh_page_bg{
      width: 460px;
    }

    .left{
      flex: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .qgwh_content{
        width: 460px;
        background-color: #ffeff3;
        border-radius: 6px 6px 0 0;

        .buyNow{
          width: 460px;
          font-size: 13px;
          box-sizing: border-box;
          padding: 20px;

          .one-span{
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 25px;
            margin-bottom: 5px;
          }

          .two-span{
            color: #D85F85;
            font-size: 15px;
          }

          .ljgm-but{
            text-align: center;
            width: 80px;
            height: 30px;
            color: #FFFFFF;
            line-height: 30px;
            background: #D85F85;
            border-radius: 34px;
          }

          .price-span{
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #D85F85;
          }
        }
      }

      .gxsw_content{
        width: 460px;
        background-color: #FFF5F0;
        border-radius: 6px 6px 0 0;

        .buyNow{
          width: 460px;
          font-size: 13px;
          box-sizing: border-box;
          padding: 20px;

          .one-span{
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 25px;
            margin-bottom: 5px;
          }

          .two-span{
            color: #FDA88B;
            font-size: 15px;
          }

          .ljgm-but{
            text-align: center;
            width: 80px;
            height: 30px;
            color: #FFFFFF;
            line-height: 30px;
            background: #FDA88B;
            border-radius: 34px;
          }

          .price-span{
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FDA88B;
          }
        }
      }

      .flxs_content{
        width: 460px;
        background-color: #FFEFEF;
        border-radius: 6px 6px 0 0;

        .buyNow{
          width: 460px;
          font-size: 13px;
          box-sizing: border-box;
          padding: 20px;

          .one-span{
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 25px;
            margin-bottom: 5px;
          }

          .two-span{
            color: #FD8B8A;
            font-size: 15px;
          }

          .ljgm-but{
            text-align: center;
            width: 80px;
            height: 30px;
            color: #FFFFFF;
            line-height: 30px;
            background: #FD8B8A;
            border-radius: 34px;
          }

          .price-span{
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FD8B8A;
          }
        }
      }

      .but-wrap{
        width: 460px;
        display: flex;
        justify-content: space-between;
      }

      .infos{
        padding: 15px;
        width: 470px;
        box-shadow: 0 2px 6px 0 #F3F3F3;
        border-radius: 6px;
        border: 1px solid #9C5DFB;

        .qlx-span{
          font-weight: 600;
          color: #333333;
        }

        .bitian{
          font-weight: 600;
          color: #FF6060;
        }

        .item{
          border-radius: 6px;
          border: 1px solid #9C5DFB;
          padding: 10px;

          input{
            border: none;
            outline: none;
          }
        }
      }
    }
    .right{
      flex: 1;
      .weixin-wrap{

        img:nth-child(1){
          width: 130px;
        }

        img:nth-child(2){
          width: 60px;
        }
      }
    }
  }

</style>
